<script setup lang="ts">
import { markRaw, reactive } from 'vue'
import { nextKey } from '../util'
import type { ComponentOptions } from './types'

const holder = reactive<{
  opts: Required<ComponentOptions> | null
}>({ opts: null })

function set(opts: ComponentOptions) {
  holder.opts = {
    key: opts.key || nextKey(),
    component: markRaw(opts.component),
    props: opts.props || {},
    events: opts.events || {}
  }
}

function onClose() {
  holder.opts = null
}

defineExpose({ set })
</script>
<template>
  <component
    v-if="holder.opts"
    :is="holder.opts.component"
    :key="holder.opts.key"
    v-bind="holder.opts?.props"
    v-on="holder.opts?.events"
    @close="onClose"
  />
</template>
